<template>
    <div class="searchNav">
       <a href="" class="search-nav-icon" @click.prevent="isShowsearchPanel(true)">
           <img src="../children/imgs/search.png" alt="" width="20px">
           <span>xxxxxxxxx</span>
       </a>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:"searchNav",
    props:{
        isShowsearchPanel:Function
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
     @import "../../../common/stylus/mixins.styl"
    .searchNav{
        background #ffffff
        width 100%
        height 60px
        border-bottom-1px(#ccc)
        position fixed
        top 0
        left 0
        z-index 998
        display flex
        justify-content center
        align-items center   
    }

    .search-nav-icon{
        width 90%
        background #e8e8e8
        height 70%
        border-radius 10px
        display flex
        justify-content center
        align-items center
        color #aaaaaa
        margin-left 6px
        font-size 20px
        font-weight lighter
    }

</style>